<template>
  <div class="itemPower">
    <span
      @click="btnAll('table',currentData,power)"
      :class="{currentselected: tabSelect.indexOf(currentData.table)>=0}"
    >{{currentData.tablename}}</span>
    <el-dialog
      :visible.sync="btnlistDialogVisible"
      custom-class="btnlistDialog"
      width="500px"
      @close="closebtnlistDialog"
      v-if="buttonBtn.length>0"
    >
      <div class="warn-dialog-header1" slot="title">
        <div class="currentTittle">
          <span>{{currentTittle}}</span>
          <span @click="clearBtn(currentData,power)">移除全部权限</span>
        </div>
      </div>
      <p class="btnlistDialogLooke">
        <img src="../../../assets/img/select.png">
        <span>仅查看</span>
      </p>

      <div class="warn-dialog-body">
        <span
          v-for="(item,index) in buttonBtn"
          :key="index"
          :class="item.selected?'selected':''"
          @click="currentBtn(item,index)"
        >{{item.buttonname}}</span>
        <div class="warn-dialog-btn">
          <el-button style="margin-right: 30px;" @click="btnlistDialogClone(itemdata)">取消</el-button>
          <el-button type="primary" @click="btnSubmit()">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      currentData: {},//单个tab
      btnlistDialogVisible: false,  //button按钮显示
      currentTittle: '',//点击当前tab的title
      buttonBtn: [], //点击当前tab的btn按钮
      subBtns: { //确认btn
        power: '',
        table: '',
        btns: [],
      },

      table: '',//传参
      buttonlist: [],//传参
    }
  },
  props: ['itemdata', 'power', 'tabSelect', "currentStatus", "selectBtn"],//currentStatus 为1时新增  2时为编辑
  created () {
    this.currentData = this.itemdata;
    this.itemdata.buttonlist.forEach((el) => {
      this.$set(el, "selected", false)
    })

  },
  methods: {
    btnAll (type, tab, power) {
      this.currentTittle = tab.tablename;
      this.table = tab.table;
      this.buttonBtn = [];
      this.buttonlist = [];
      if (this.tabSelect.indexOf(tab.table) >= 0 && this.currentStatus == 1) {
        this.tabSelect.splice(this.tabSelect.indexOf(tab.table), 1)
        this.btnlistDialogVisible = false;
        let currentTab = {
          power: this.power,
          table: this.table,
        }
        this.$emit('clearTab', currentTab, this.tabSelect)
        return;
      } else if (this.tabSelect.indexOf(tab.table) >= 0 && this.currentStatus == 2) {

        if (tab.buttonlist.length == 0) {
          this.tabSelect.splice(this.tabSelect.indexOf(tab.table), 1)
          let currentTab = {
            power: this.power,
            table: this.table,
          }
          this.$emit('clearTab', currentTab, this.tabSelect)
        }
      } else if (this.tabSelect.indexOf(tab.table) == '-1' && this.currentStatus == 2) {
        var currentTab = {
          power: this.power,
          current: {
            table: this.table,
            buttonlist: this.buttonlist
          }
        }
        this.tabSelect.push(tab.table)
        this.btnlistDialogVisible = false;
        this.$emit('addTab', currentTab, this.tabSelect)
      } else {
        this.tabSelect.push(tab.table)
      }
      tab.buttonlist.forEach((el) => {
        if (this.selectBtn.length > 0) {
          var idx = this.selectBtn.findIndex(iten => iten.power == this.power);
          if (idx > '-1' && this.selectBtn[idx].tablist && this.selectBtn[idx].tablist.length > 0) {
            var index = this.selectBtn[idx].tablist.findIndex(iten => iten.table == tab.table);
            if (index > '-1' && this.selectBtn[idx].tablist[index].buttonlist.findIndex(iten => iten == el.button) > -1) {
              el.selected = true;
              this.buttonlist.push(el.button);
            }
            else {
              el.selected = false;
            }
          }
        } else {
          el.selected = false;
        }
        this.buttonBtn.push(el)
      })
      var currentTab = {
        power: this.power,
        current: {
          table: this.table,
          buttonlist: []
        }
      }
      if (this.currentStatus == 1) {
        this.$emit('addTab', currentTab, this.tabSelect)
      }


      this.btnlistDialogVisible = true;
    },
    btnSubmit () { //确定
      var currentTab = {
        power: this.power,
        current: {
          table: this.table,
          buttonlist: this.buttonlist
        }
      }
      this.btnlistDialogVisible = false;
      this.$emit('addTab', currentTab, this.tabSelect)
    },
    clearBtn (itemtab, power) { //移除全部权限
      // return;
      // if (this.selectBtn) {
      //   let current_idx = this.selectBtn.findIndex(item => item.power == power);
      //   if (current_idx > -1) {
      //     let el = this.selectBtn[current_idx];
      //     let index = el.tablist.findIndex(item => item.table == itemtab.table)
      //     // console.log(index, el)
      //     el.tablist.splice(index, 1)
      //     // if (this.currentStatus == 2 && el.tablist.length == 0) { //新增时初次选中tab二次点击去掉
      //     //   this.selectBtn.splice(current_idx, 1)
      //     // }

      //   }
      // }
      this.tabSelect.splice(this.tabSelect.indexOf(itemtab.table), 1)
      this.$emit('editClear', { item: itemtab, power: power }, this.tabSelect)

      this.btnlistDialogVisible = false;
    },
    closebtnlistDialog () { //关闭
      this.btnlistDialogVisible = false;
    },
    btnlistDialogClone (tab) { //取消
      // if (this.currentStatus == 2) {
      //   // console.log(tab, this.selectBtn)
      //   tab.buttonlist.forEach((el) => {
      //     if (this.selectBtn.length > 0) {
      //       var idx = this.selectBtn.findIndex(iten => iten.power == this.power);
      //       if (idx > '-1' && this.selectBtn[idx].tablist && this.selectBtn[idx].tablist.length > 0) {
      //         var index = this.selectBtn[idx].tablist.findIndex(iten => iten.table == tab.table);
      //         if (index > '-1' && this.selectBtn[idx].tablist[index].buttonlist.findIndex(iten => iten == el.button) > -1) {
      //           el.selected = true;
      //         } else {
      //           el.selected = false;
      //         }
      //       }
      //     }
      //     // } else {
      //     //   el.selected = false;
      //     // }
      //     this.buttonBtn.push(el)
      //   })
      //   var currentTab = {
      //     power: this.power,
      //     current: {
      //       table: this.table,
      //       buttonlist: []
      //     }
      //   }
      //   // console.log(currentTab, this.tabSelect)
      //   this.$emit('addTab', currentTab, this.tabSelect)
      // }


      this.btnlistDialogVisible = false;
    },
    currentBtn (iten, key) {
      // console.log(this.buttonlist)
      // return;
      this.buttonBtn[key].selected = !this.buttonBtn[key].selected
      if (this.buttonlist.indexOf(iten.button) >= 0) {
        this.buttonlist.splice(this.buttonlist.indexOf(iten.button), 1)
      } else {
        this.buttonlist.push(iten.button)
      }
    },
  }
}
</script>
<style scoped>
.oneLevelTable {
  border: 0 !important;
}
.itemPower {
  display: inline-block;
  width: 137px;
  height: 40px;
}
.itemPower > span {
  display: inline-block;
  width: 137px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #d2d2d2;
  cursor: pointer;
  margin-right: 10px;
}
.warn-dialog-header1 {
  /* height: 40px; */
  /* display: flex; */
  /* align-items: center; */
  /* line-height: 40px; */
  padding: 15px 0;
  border-bottom: 1px solid #d2d2d2;
}
.currentTittle {
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
}
.warn-dialog-header1 span:first-child {
  box-sizing: border-box;
  padding-left: 10px;
  border-left: 5px solid #0064fe;
  color: #404040;
  float: left;
  font-size: 14px;
}

.warn-dialog-header1 span:nth-child(2) {
  float: right;
  font-size: 14px;
  cursor: pointer;
}

.btnlistDialogLooke {
  padding: 0px 10px 0px 10px;
  height: 26px;
}

.btnlistDialogLooke img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}

.btnlistDialogLooke > span {
  display: inline-block;
  height: 16px;
  line-height: 16px;
}

.warn-dialog-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.warn-dialog-body {
  padding: 0;
}
.warn-dialog-body > span {
  /* padding: 10px 20px; */
  display: inline-block;
  /* height: 40px; */
  /* line-height: 40px; */
  text-align: center;
  border: 1px solid #d2d2d2;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

.warn-dialog-body .selected {
  color: #0064e4;
  border: 1px solid #0064e4;
  background: url("../../../assets/img/selected.png") no-repeat bottom right;
}

.currentselected {
  color: #fff;
  background: #0064e4;
}
</style>


